import "package:flutter/material.dart";

// 弹性布局
class UseFlex extends StatelessWidget {
  const UseFlex({super.key});
  @override
  Widget build(BuildContext context) {
    // var c = Container(
    //   width: double.infinity, //当父容器设置宽度，设置width超过父容器宽度，则占满父容器宽度，如果父容器是屏幕，则是屏幕宽度
    //   height: double.infinity, //当父容器设置高度，设置height超过父容器高度，则占满父容器高度，如果父容器是屏幕，则是屏幕高度
    // );

    // return Column(
    //   mainAxisAlignment: MainAxisAlignment.center,
    //   children: [
    //     Row(
    //       mainAxisAlignment: MainAxisAlignment.spaceAround,
    //       crossAxisAlignment: CrossAxisAlignment.center, //相对外部容器
    //       children: [
    //         Container(
    //           width: 100,
    //           height: 100,
    //           decoration: const BoxDecoration(color: Color(0xffbbffaa)),
    //           child: const Icon(Icons.home),
    //         ),
    //         Container(
    //           width: 100,
    //           height: 100,
    //           decoration: const BoxDecoration(
    //               color: Color.fromARGB(255, 170, 245, 255)),
    //           child: const Icon(Icons.home),
    //         ),
    //         Container(
    //           width: 100,
    //           height: 100,
    //           decoration: const BoxDecoration(
    //               color: Color.fromARGB(255, 198, 170, 255)),
    //           child: const Icon(Icons.home),
    //         )
    //       ],
    //     )
    //   ],
    // );

    // return Row(
    //   children: [
    //     Expanded(
    //       flex: 1,
    //       child: Container(
    //         width: 200,
    //         height: 100,
    //         decoration: const BoxDecoration(color: Color(0xffbbffaa)),
    //         child: const Icon(Icons.home),
    //       ),
    //     ), //当使用Expanded后，设置宽度没效果，根据设置的flex占比分配多余
    //     Expanded(
    //       flex: 2,
    //       child: Container(
    //         width: 200,
    //         height: 100,
    //         decoration: const BoxDecoration(color: Color.fromARGB(255, 170, 244, 255)),
    //         child: const Icon(Icons.home),
    //       ),
    //     ),
    //   ],
    // );

    // return Flex(
    //   direction: Axis.horizontal, //horizontal：水平方向，同Row；vertical：垂直方向，同Column
    //   mainAxisAlignment: MainAxisAlignment.start,
    //   crossAxisAlignment: CrossAxisAlignment.start,
    //   children: [
    //     Expanded(
    //       flex: 1,
    //       child: Container(
    //         width: 200,
    //         // height: 100,
    //         decoration: const BoxDecoration(color: Color(0xffbbffaa)),
    //         child: const Icon(Icons.home),
    //       ),
    //     ), //当使用Expanded后，设置宽度没效果，根据设置的flex占比分配多余
    //     Expanded(
    //       flex: 2,
    //       child: Container(
    //         width: 200,
    //         // height: 100,
    //         decoration:
    //             const BoxDecoration(color: Color.fromARGB(255, 170, 244, 255)),
    //         child: const Icon(Icons.home),
    //       ),
    //     ),
    //     Container(
    //       width: 120,
    //       height: 100,
    //       decoration:
    //           const BoxDecoration(color: Color.fromARGB(255, 203, 170, 255)),
    //       child: const Icon(Icons.home),
    //     ),
    //   ],
    // );
    return ListView(
      padding: const EdgeInsets.all(10),
      children: [
        Container(
          margin: const EdgeInsets.fromLTRB(0, 0, 0, 10),
          height: 200,
          decoration: const BoxDecoration(color: Color(0xffbbffaa)),
        ),
        Container(
          margin: const EdgeInsets.fromLTRB(0, 0, 0, 10),
          height: 140,
          child: Row(
            children: [
              Expanded(
                flex: 2,
                child: Container(
                  height: double.infinity,
                  margin: const EdgeInsets.fromLTRB(0, 0, 10, 0),
                  decoration: const BoxDecoration(
                      color: Color.fromARGB(255, 203, 170, 255)),
                  // child: const Icon(Icons.home),
                ),
              ),
              Expanded(
                flex: 1,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        decoration: const BoxDecoration(
                            color: Color.fromARGB(255, 203, 170, 255)),
                        // child: const Icon(Icons.home),
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        decoration: const BoxDecoration(
                            color: Color.fromARGB(255, 255, 170, 218)),
                        // child: const Icon(Icons.home),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ],
    );
  }
}
